<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>老板审批 - 员工请假审批系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.7/axios.min.js"></script>
</head>
<body class="bg-base-200 min-h-screen">
<!-- 导航栏 -->
<div class="navbar bg-primary text-primary-content shadow-lg">
    <div class="navbar-start">
        <a href="/leave/" class="btn btn-ghost text-xl font-bold">
            <i class="fas fa-calendar-check mr-2"></i>
            请假审批系统
        </a>
    </div>
    <div class="navbar-center hidden lg:flex">
        <ul class="menu menu-horizontal px-1">
            <li><a href="/leave/" class="btn btn-ghost">首页</a></li>
            <li><a href="/leave/apply" class="btn btn-ghost">请假申请</a></li>
            <li><a href="/leave/manager" class="btn btn-ghost">领导审批</a></li>
            <li><a href="/leave/boss" class="btn btn-ghost btn-active">老板审批</a></li>
            <li><a href="/leave/monitor" class="btn btn-ghost">流程监控</a></li>
        </ul>
    </div>
</div>

<!-- 主要内容 -->
<div class="container mx-auto px-4 py-8">
    <!-- 页面标题 -->
    <div class="text-center mb-8">
        <h1 class="text-4xl font-bold text-base-content mb-4">
            <i class="fas fa-crown text-accent mr-3"></i>
            老板审批
        </h1>
        <p class="text-lg text-base-content/70">处理超过2天的请假申请</p>
    </div>

    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="stat bg-gradient-to-r from-warning to-orange-400 text-white shadow-xl rounded-2xl">
            <div class="stat-figure text-white/80">
                <i class="fas fa-hourglass-half text-3xl"></i>
            </div>
            <div class="stat-title text-white/90">待审批</div>
            <div class="stat-value text-white" id="pendingCount">0</div>
            <div class="stat-desc text-white/80">需要最终决策</div>
        </div>
        <div class="stat bg-gradient-to-r from-success to-green-400 text-white shadow-xl rounded-2xl">
            <div class="stat-figure text-white/80">
                <i class="fas fa-thumbs-up text-3xl"></i>
            </div>
            <div class="stat-title text-white/90">已批准</div>
            <div class="stat-value text-white" id="approvedCount">0</div>
            <div class="stat-desc text-white/80">本周已批准</div>
        </div>
        <div class="stat bg-gradient-to-r from-error to-red-400 text-white shadow-xl rounded-2xl">
            <div class="stat-figure text-white/80">
                <i class="fas fa-ban text-3xl"></i>
            </div>
            <div class="stat-title text-white/90">已拒绝</div>
            <div class="stat-value text-white" id="rejectedCount">0</div>
            <div class="stat-desc text-white/80">本周已拒绝</div>
        </div>
        <div class="stat bg-gradient-to-r from-info to-blue-400 text-white shadow-xl rounded-2xl">
            <div class="stat-figure text-white/80">
                <i class="fas fa-chart-line text-3xl"></i>
            </div>
            <div class="stat-title text-white/90">平均天数</div>
            <div class="stat-value text-white" id="avgDays">0</div>
            <div class="stat-desc text-white/80">本月平均请假</div>
        </div>
    </div>

    <!-- 重要提醒 -->
    <div class="alert alert-warning shadow-lg mb-8">
        <i class="fas fa-exclamation-triangle text-2xl"></i>
        <div>
            <h3 class="font-bold text-lg">重要提醒</h3>
            <div class="text-sm">只有请假天数超过2天的申请才需要老板审批，请仔细审核每个申请的合理性。</div>
        </div>
    </div>

    <!-- 待审批任务列表 -->
    <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
            <div class="flex justify-between items-center mb-6">
                <h2 class="card-title text-2xl">
                    <i class="fas fa-clipboard-list text-accent mr-2"></i>
                    高级审批任务
                </h2>
                <div class="flex space-x-2">
                    <button class="btn btn-outline btn-sm" onclick="filterTasks('all')">
                        <i class="fas fa-list mr-1"></i>
                        全部
                    </button>
                    <button class="btn btn-outline btn-sm" onclick="filterTasks('urgent')">
                        <i class="fas fa-exclamation mr-1"></i>
                        紧急
                    </button>
                    <button class="btn btn-primary btn-sm" onclick="loadTasks()">
                        <i class="fas fa-sync-alt mr-1"></i>
                        刷新
                    </button>
                </div>
            </div>

            <!-- 任务列表 -->
            <div id="taskList" class="space-y-6">
                <!-- 任务项将通过JavaScript动态加载 -->
            </div>

            <!-- 空状态 -->
            <div id="emptyState" class="text-center py-16 hidden">
                <i class="fas fa-medal text-8xl text-accent/30 mb-6"></i>
                <h3 class="text-2xl font-bold text-base-content/70 mb-3">暂无需要审批的任务</h3>
                <p class="text-base-content/50 text-lg">所有长期请假申请都已处理完成</p>
            </div>
        </div>
    </div>
</div>

<!-- 高级审批模态框 -->
<dialog id="approvalModal" class="modal">
    <div class="modal-box w-11/12 max-w-4xl">
        <h3 class="font-bold text-xl mb-6">
            <i class="fas fa-gavel text-accent mr-2"></i>
            高级审批决策
        </h3>

        <!-- 申请详情 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
            <!-- 基本信息 -->
            <div class="card bg-base-200">
                <div class="card-body">
                    <h4 class="card-title text-lg mb-4">
                        <i class="fas fa-info-circle text-info mr-2"></i>
                        申请信息
                    </h4>
                    <div class="space-y-3">
                        <div class="flex justify-between">
                            <span class="font-semibold">申请人:</span>
                            <span id="modalApplicant">-</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="font-semibold">请假天数:</span>
                            <span class="badge badge-warning badge-lg" id="modalDays">-</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="font-semibold">开始日期:</span>
                            <span id="modalStartDate">-</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="font-semibold">结束日期:</span>
                            <span id="modalEndDate">-</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 请假原因 -->
            <div class="card bg-base-200">
                <div class="card-body">
                    <h4 class="card-title text-lg mb-4">
                        <i class="fas fa-comment-alt text-primary mr-2"></i>
                        请假原因
                    </h4>
                    <p class="text-base leading-relaxed" id="modalReason">-</p>
                </div>
            </div>
        </div>

        <!-- 审批历史 -->
        <div class="card bg-base-200 mb-6">
            <div class="card-body">
                <h4 class="card-title text-lg mb-4">
                    <i class="fas fa-history text-success mr-2"></i>
                    审批历史
                </h4>
                <div class="timeline timeline-vertical">
                    <div class="timeline-item">
                        <div class="timeline-middle">
                            <i class="fas fa-play-circle text-primary"></i>
                        </div>
                        <div class="timeline-end timeline-box">
                            <div class="font-bold">流程开始</div>
                            <div class="text-sm text-base-content/70">员工提交申请</div>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-middle">
                            <i class="fas fa-check-circle text-success"></i>
                        </div>
                        <div class="timeline-end timeline-box">
                            <div class="font-bold">领导审批通过</div>
                            <div class="text-sm text-base-content/70">已通过初级审批</div>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-middle">
                            <i class="fas fa-hourglass-half text-warning"></i>
                        </div>
                        <div class="timeline-end timeline-box">
                            <div class="font-bold">等待最终审批</div>
                            <div class="text-sm text-base-content/70">需要您的决策</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 审批意见 -->
        <div class="form-control mb-6">
            <label class="label">
                    <span class="label-text font-semibold text-lg">
                        <i class="fas fa-pen-fancy text-accent mr-2"></i>
                        最终审批意见
                    </span>
            </label>
            <textarea id="approvalComment" placeholder="请输入详细的审批意见和决策理由..."
                      class="textarea textarea-bordered textarea-lg h-32"></textarea>
        </div>

        <!-- 审批按钮 -->
        <div class="modal-action">
            <button class="btn btn-success btn-lg" onclick="approveTask('approved')">
                <i class="fas fa-check-double mr-2"></i>
                批准申请
            </button>
            <button class="btn btn-error btn-lg" onclick="approveTask('驳回')">
                <i class="fas fa-times-circle mr-2"></i>
                拒绝申请
            </button>
            <button class="btn btn-outline" onclick="document.getElementById('approvalModal').close()">
                <i class="fas fa-arrow-left mr-2"></i>
                返回
            </button>
        </div>
    </div>
</dialog>

<!-- 成功提示模态框 -->
<dialog id="successModal" class="modal">
    <div class="modal-box">
        <h3 class="font-bold text-lg text-success">
            <i class="fas fa-check-circle mr-2"></i>
            审批完成
        </h3>
        <p class="py-4" id="successMessage">最终审批决策已完成。</p>
        <div class="modal-action">
            <button class="btn btn-primary" onclick="document.getElementById('successModal').close(); loadTasks()">确定</button>
        </div>
    </div>
</dialog>

<script>
    let currentTaskId = null;

    // 页面加载时获取任务
    document.addEventListener('DOMContentLoaded', function() {
        loadTasks();
        loadBossStatistics();
    });

    async function loadBossStatistics() {
        try {
            const response = await axios.get('/leave/boss/statistics'); // 老板统计接口地址
            const stats = response.data;

            console.log(stats)
            // 更新老板审批的统计卡片
            document.getElementById('approvedCount').textContent = stats.approvedCount;
            document.getElementById('rejectedCount').textContent = stats.rejectedCount;
            document.getElementById('avgDays').textContent = stats.avgDays;
        } catch (error) {
            console.error('加载老板审批统计失败:', error);
        }
    }
    // 加载待审批任务
    async function loadTasks() {
        try {
            const response = await axios.get('/leave/boss/tasks');
            const tasks = response.data;

            console.log(tasks)
            const taskList = document.getElementById('taskList');
            const emptyState = document.getElementById('emptyState');

            if (tasks.length === 0) {
                taskList.innerHTML = '';
                emptyState.classList.remove('hidden');
            } else {
                emptyState.classList.add('hidden');
                taskList.innerHTML = tasks.map(task => createTaskCard(task)).join('');
            }

            // 更新统计
            document.getElementById('pendingCount').textContent = tasks.length;

            // 计算平均天数
            if (tasks.length > 0) {
                const avgDays = tasks.reduce((sum, task) => {
                    return sum + (task.variables?.days || 0);
                }, 0) / tasks.length;
                document.getElementById('avgDays').textContent = Math.round(avgDays * 10) / 10;
            }

        } catch (error) {
            console.error('加载任务失败:', error);
            document.getElementById('taskList').innerHTML =
                '<div class="alert alert-error"><i class="fas fa-exclamation-triangle mr-2"></i>加载任务失败，请刷新重试</div>';
        }
    }

    // 创建任务卡片
    function createTaskCard(task) {
        const variables = task.variables || {};
        const applicant = variables.applicant || '未知';
        const reason = variables.reason || '无';
        const days = variables.days || 0;
        const startDate = variables.startDate || '';
        const endDate = variables.endDate || '';

        // 判断是否紧急（超过5天）
        const isUrgent = days > 5;
        const urgentBadge = isUrgent ? '<div class="badge badge-error badge-sm">紧急</div>' : '';

        return `
                <div class="card bg-gradient-to-r from-base-100 to-base-200 border-l-4 ${isUrgent ? 'border-l-error' : 'border-l-accent'} hover:shadow-xl transition-all duration-300">
                    <div class="card-body">
                        <div class="flex justify-between items-start">
                            <div class="flex-1">
                                <div class="flex items-center gap-3 mb-3">
                                    <h3 class="card-title text-xl">
                                        <i class="fas fa-user-circle text-accent mr-2"></i>
                                        ${applicant} 的长期请假申请
                                    </h3>
                                    ${urgentBadge}
                                </div>

                                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
                                    <div class="stat bg-base-100 rounded-lg p-3">
                                        <div class="stat-title text-xs">请假天数</div>
                                        <div class="stat-value text-lg ${isUrgent ? 'text-error' : 'text-accent'}">${days}</div>
                                        <div class="stat-desc">天</div>
                                    </div>
                                    <div class="stat bg-base-100 rounded-lg p-3">
                                        <div class="stat-title text-xs">开始日期</div>
                                        <div class="stat-value text-sm">${startDate}</div>
                                    </div>
                                    <div class="stat bg-base-100 rounded-lg p-3">
                                        <div class="stat-title text-xs">结束日期</div>
                                        <div class="stat-value text-sm">${endDate}</div>
                                    </div>
                                    <div class="stat bg-base-100 rounded-lg p-3">
                                        <div class="stat-title text-xs">审批级别</div>
                                        <div class="stat-value text-sm text-warning">最终审批</div>
                                    </div>
                                </div>

                                <div class="bg-base-100 rounded-lg p-4">
                                    <h4 class="font-semibold text-base-content/70 mb-2">请假原因:</h4>
                                    <p class="text-base-content leading-relaxed">${reason}</p>
                                </div>
                            </div>

                            <div class="flex flex-col space-y-3 ml-6">
                                <button class="btn btn-accent btn-lg" onclick="openApprovalModal('${task.taskId}', '${applicant}', '${reason}', ${days}, '${startDate}', '${endDate}')">
                                    <i class="fas fa-crown mr-2"></i>
                                    最终审批
                                </button>
                                <div class="text-center">
                                    <div class="text-xs text-base-content/50">任务ID</div>
                                    <div class="text-xs font-mono">
                                            ${task.taskId.substring(0, 8)}...</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
    }

    // 打开审批模态框
    function openApprovalModal(taskId, applicant, reason, days, startDate, endDate) {
        currentTaskId = taskId;

        document.getElementById('modalApplicant').textContent = applicant;
        document.getElementById('modalReason').textContent = reason;
        document.getElementById('modalDays').textContent = days + ' 天';
        document.getElementById('modalStartDate').textContent = startDate;
        document.getElementById('modalEndDate').textContent = endDate;
        document.getElementById('approvalComment').value = '';

        document.getElementById('approvalModal').showModal();
    }

    // 审批任务
    async function approveTask(approvalResult) {
        if (!currentTaskId) return;

        const comment = document.getElementById('approvalComment').value;

        if (!comment.trim()) {
            alert('请输入审批意见');
            return;
        }

        try {
            const response = await axios.post('/leave/boss/approve', {
                taskId: currentTaskId,
                approvalResult: approvalResult,
                comment: comment
            });

            if (response.data.success) {
                document.getElementById('approvalModal').close();
                document.getElementById('successMessage').textContent =
                    `最终审批${approvalResult}成功！${response.data.message || ''}`;
                document.getElementById('successModal').showModal();
            } else {
                alert('审批失败: ' + response.data.message);
            }
        } catch (error) {
            console.error('审批失败:', error);
            alert('审批失败，请重试');
        }
    }

    // 过滤任务
    function filterTasks(type) {
        // 这里可以实现任务过滤逻辑
        loadTasks();
    }
</script>
</body>
</html>